<script setup>
import IndexHeader from "@/components/IndexHeader.vue";
import VideoCard from "@/views/index/components/VideoCard.vue";
import {onMounted, ref} from "vue";
import {followApi} from "@/apis/followApi.js";
import VideoApi from "@/apis/VideoApi.js";

const followee_index = ref('1');
const followee = ref([]);
const user_id = localStorage.getItem('fan_video_userid');
const videos = ref([]);

const fetchFollowee = async (userid) => {
  const res = await followApi.fetchFollow(userid)
  console.log('关注者',res)
  followee.value = res.data;
}

const fetchFolloweeVideos = async (userid) => {
  const res = await VideoApi.fetchOtherUserVideo(userid)
  console.log('视频',userid,res.data);
  return res.data.videos
}

onMounted( ()=>{
  fetchFollowee(user_id);
});

const selectedFollowee = ref(followee.value[0]);

function selectFollowee(key, keyPath) {
  followee_index.value = `${key}`
  selectedFollowee.value = followee.value[key]
  if (selectedFollowee.value && selectedFollowee.value.userid) {
    fetchFolloweeVideos(selectedFollowee.value.userid).then((videosData) => {
      videos.value = videosData;
    }).catch((error) => {
      console.error('获取视频失败:', error);
      videos.value = []; // 处理错误情况
    });
  }
}

</script>

<template>
  <div class="header">
    <IndexHeader :scrollTrans="false"></IndexHeader>
  </div>
  <div class="main-container">

    <div class="sidebar">
      <div class="sidebar-followee">
        <el-menu
            :default-active="followee_index"
            class="el-menu-demo"
            mode="vertical"
            @select="selectFollowee"
            :ellipsis="false"


        >
          <div v-for="(followee, idx) in followee" :key="idx" class="followee-item">
            <el-menu-item class="followee-name" :index="idx">用户{{ followee.userid }}</el-menu-item>
          </div>
        </el-menu>
        <!--            <el-tabs v-model="fav_index" tab-position="left" @tab-click="selectFavorite(fav_index)">-->
        <!--              <div v-for="(favorite, idx) in favorite" :key="idx" class="favorite-item">-->
        <!--                <el-tab-pane :label="favorite.name" :name="idx" class="favorite-name"></el-tab-pane>-->
        <!--              </div>-->
        <!--            </el-tabs>-->
      </div>
    </div>

    <div class="video-area">
      <div v-if="selectedFollowee">
        <h2>{{ selectedFollowee.userid }}</h2>
        <div class="video-grid" v-if="videos && videos.length > 0">
          <VideoCard v-for="(video, idx) in videos" :key="idx" :video="video" />
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
.header {
  width: 100%;
  height: 100px;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
}

.main-container {
  display: flex;
  //height: 100vh;

  .sidebar {
    width: 20%;
    max-width: 300px;
    background-color: white;
    padding: 16px;
    overflow-y: auto;

    .sidebar-followee {

      .followee-item {
        margin-bottom: 0;
        border-radius: 5px;
        overflow: hidden;
        //box-shadow: 1px 0 0 0 #409EFF;


        .followee-name {
          font-size: 18px !important;
          font-weight: 600;
        }
        .el-menu-item.is-active {
          color: #409EFF;
          background-color: #D5ECFE;
        }
      }
    }
  }

  .video-area {
    margin-left: 20px;
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;
    width: 65%;

    .video-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      box-shadow: 0 1px 0 0 #e7e7e7;;

      @media screen and (max-width: 1654px) {
        grid-template-columns: repeat(4, 1fr);
      }

      @media screen and (max-width: 1334px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
}
</style>